<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>停车场管理系统-首页</title>
</head>
<body>
{% include 'nav.html' %}
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--页面主要内容-->
        <main class="lyear-layout-content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-primary">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">今日收入</p>
                                    <p class="h3 text-white m-b-0">{{ money_day }}</p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-currency-cny fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-danger">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">用户总数</p>
                                    <p class="h3 text-white m-b-0">{{ user_num }}</p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-account fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-success">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">剩余车位</p>
                                    <p class="h3 text-white m-b-0">{{ remain_carport }}/{{ all_carport }}</p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-parking fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-purple">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">车辆记录</p>
                                    <p class="h3 text-white m-b-0">{{ car_manage_count }}条</p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                        class="mdi mdi-comment-outline fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4>停车场剩余车位</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="chart-doughnut" width="320" height="350"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h4>车辆进出情况</h4>
                            </div>
                            <div class="card-body">
                                <canvas id="chart-vbar-2" width="400" height="250"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>收费标准</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>类型</th>
                                            <th>时间</th>
                                            <th>收费</th>
                                            <th>说明</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <th scope="row" rowspan="4" style="vertical-align: middle">会员车辆</th>
                                            <td>月卡</td>
                                            <td>150元</td>
                                            <td rowspan="4" style="vertical-align: middle">会员期间停车无需收取其他费用</td>
                                        </tr>
                                        <tr>
                                            <td>季卡</td>
                                            <td>425元</td>
                                        </tr>
                                        <tr>
                                            <td>半年卡</td>
                                            <td>810元</td>
                                        </tr>
                                        <tr>
                                            <td>年卡</td>
                                            <td>1530元</td>
                                        </tr>
                                        <tr>
                                            <th scope="row" rowspan="4" style="vertical-align: middle">临时车辆</th>
                                            <td>早晨7:00-19:00</td>
                                            <td>2元/时</td>
                                            <td rowspan="2" style="vertical-align: middle">
                                                半小时内免费，未满一小时按一小时收费，每24h内最高收取18元。
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>晚上19:00-7:00</td>
                                            <td>3元/时</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<!--图表插件-->
<script type="text/javascript" src="/static/js/Chart.js"></script>
<script type="text/javascript">
    new Chart($("#chart-doughnut"), {
        type: 'doughnut',
        data: {
            labels: ["A区", "B区", "C区", "D区"],
            datasets: [{
                data: [{{A_remian}}, {{B_remian}}, {{C_remian}}, {{D_remian}}],
                backgroundColor: ['rgba(75,192,192,1)', 'rgba(255,99,132,1)', 'rgba(54,162,235,1)', 'rgba(255,159,64,1)']
            }]
        },
        options: {
            responsive: false   //固定尺寸
        }
    });
    new Chart($("#chart-vbar-2"), {
        type: 'bar',
        data: {
            labels: ["{{ day1 }}", "{{ day2 }}", "{{ day3 }}", "{{ day4 }}", "{{ day5 }}", "{{ day6 }}", "{{today}}"],
            datasets: [{
                label: "进入",
                backgroundColor: "rgba(51,202,185,0.5)",
                borderColor: "rgba(0,0,0,0)",
                hoverBackgroundColor: "rgba(51,202,185,0.7)",
                hoverBorderColor: "rgba(0,0,0,0)",
                data: [{{ day1_in }}, {{ day2_in }}, {{ day3_in }}, {{ day4_in }}, {{ day5_in }}, {{ day6_in }},
                    {{ today_in }}]
            },
                {
                    label: "出行",
                    backgroundColor: "rgba(255,159,64,0.5)",
                    borderColor: "rgba(0,0,0,0)",
                    hoverBackgroundColor: "rgba(255,159,64,0.7)",
                    hoverBorderColor: "rgba(0,0,0,0)",
                    data: [{{ day1_out }}, {{ day2_out }}, {{ day3_out }}, {{ day4_out }}, {{ day5_out }}, {{ day6_out }},
                        {{ today_out }}]
                }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        stepSize: 1
                    }
                }]
            }
        }
    });

</script>
</body>
</html>